<template>
    <div class="content-edit">

        <el-form :model="info" label-width="120px">

            <el-form-item label="标题" style="max-width: 560px">
                <el-input class="w-50" v-model="info.title" />
            </el-form-item>

            <el-form-item label="位置" style="max-width: 560px">
                <!-- <el-input class="w-50" v-model="info.name" /> -->
                <el-select v-model="info.name" class="m-2" placeholder="Select" size="large">
                    <el-option label="首页" value="home" />
                </el-select>
            </el-form-item>
            <el-form-item label="描述" style="max-width: 560px">
                <el-input class="w-50" v-model="info.desc" />
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="info.status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>


            <el-form-item label="图片列表">

                <el-button type="primary" @click="addPicture"> 添加</el-button>
                <el-table :data="picture_list" style="margin-top:10px">
                    <el-table-column prop="src" label="图片" width="300">
                        <template #default="scope">

                            <ImageManager :maxNumber="1" v-model="scope.row.src"></ImageManager>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort_order" label="排序" width="">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.sort_order" :min="1" :max="100" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" width="">
                        <template #default="scope">
                            <el-button type="error" @click="deletePicture(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="do_edit">保存</el-button>
            </el-form-item>

        </el-form>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
// import { Picture as IconPicture } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import ImageManager from '../../Common/image-manager.vue'

const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();

const info: any = ref<object>({

    id: 0,
    title: '',
    name: '', // 位置，类型 （不是名称）
    desc: '',
    status: 0,

});

const picture_list = ref<Array<object>>([])

const do_edit = () => {

    let url = VITE_URL + '/admin.slide/edit';
    if (info.value.id) {
        url += '?id=' + info.value.id;
    }

    var data: any = {
        title: info.value.title,
        name: info.value.name,
        desc: info.value.desc,
        status: info.value.status,
        picture_list: JSON.stringify(picture_list.value)

    };

    var data_str = '';
    for (var p in data) {
        data_str += p + '=' + data[p] + '&';
    }

    axios.post(url, data_str).then(function (res) {

        if (res.data.code == 0) {

            ElMessage({
                message: '保存成功',
                type: !res.data.code ? 'success' : 'error',
                duration: 1000,
                onClose: function () {
                    router.push({ path: '/main/cms/lunbo' });

                }
            })
        }

    });

}
const single = () => {
    var url = VITE_URL + '/admin.slide/single';

    url += '?id=' + info.value.id;
    axios.get(url).then((res: any) => {

        info.value = res.data;
        picture_list.value = res.data.picture_list;

    });
}

const init = () => {

    info.value.id = route.params.id ? route.params.id : 0;
    if (info.value.id) {
        single();
    }

}
init();
const addPicture = () => {

    picture_list.value.push({
        src: '',
        sort_order: 0,
    });
}

const deletePicture = (row: any, index: number) => {

    // console.log(row, index )
    picture_list.value.splice(index, 1);

}

</script>

